import {
  ActionSheet,
  Button,
  InfiniteScroll,
  NavBar,
  Skeleton,
  Toast,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.css";
import { MoreOutline } from "antd-mobile-icons";
import { useEffect, useRef, useState } from "react";
import request from "../../axios";

const Shop = () => {
  const navigate = useNavigate();
  const [visible, setVisible] = useState<boolean>(false);
  const [hasMore, setHasMore] = useState(true);
  const [pageNo, setPageNo] = useState<number>(1);
  const [nowInfo, setNowInfo] = useState<any>({});
  const [shop, setShop] = useState<any>([]);

  const actions: any[] = [
    {
      text: "编辑门店",
      key: "edit",
      onClick: () => {
        navigate(`/shop/edit?type=edit&obj=${JSON.stringify(nowInfo)}`);
      },
    },
    {
      text: "删除门店",
      key: "delete",
      onClick: async () => {
        try {
          await request.delete(`/store/delete/${nowInfo.id}`);
          Toast.show("删除成功");
        } catch (error) {
        } finally {
          getDataList(1);
          setVisible(false);
        }
      },
    },
  ];

  const getDataList = async (page: number = 1) => {
    try {
      const { data } = await request.get("/store/list", {
        pageNo: page,
        pageSize: 10,
      });
      if (data) {
        if (page === 1) {
          setShop(data?.records || []);
        } else {
          setShop((prev: any) => [...prev, ...(data?.records || [])]);
        }
        // 更新是否有更多数据
        setHasMore(
          data?.records?.length >= 10 && (data?.total || 0) > page * 10
        );
      }
    } catch (error) {}
  };

  // 加载更多数据
  const loadMore = async () => {
    await getDataList(pageNo);
    setPageNo((prev) => prev + 1);
  };

  useEffect(() => {
    getDataList(1);
  }, []);

  return (
    <div className="detail" style={{ background: "rgb(242,244,247)" }}>
      <NavBar
        onBack={() => {
          navigate(-1);
        }}
      >
        门店管理
      </NavBar>
      <div className={styles.content}>
        {shop?.length > 0 ? (
          shop?.map((item: any, ind: number) => {
            return (
              <div className={styles.shop_item}>
                <div className={styles.top_title}>
                  <span>{item?.name}</span>
                  <MoreOutline
                    fontSize={20}
                    onClick={() => {
                      setNowInfo(item);
                      setVisible(true);
                    }}
                  />
                </div>
                <div className={styles.center_title}>
                  店长 {item?.managerName || "-"}
                </div>
                <div className={styles.bottom_title}>
                  {item?.province}-{item?.municipal}-{item?.district}-
                  {item?.addressDetail}
                </div>
              </div>
            );
          })
        ) : (
        //   <Skeleton.Paragraph lineCount={5} animated />
        ''
        )}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
      <div className={styles.bottom}>
        <Button
          className={styles.subbtn}
          onClick={() => navigate(`/shop/edit?type=add`)}
        >
          添加门店
        </Button>
      </div>
      <ActionSheet
        extra="请选择你要进行的操作"
        cancelText="取消"
        visible={visible}
        actions={actions}
        onClose={() => setVisible(false)}
      />
    </div>
  );
};

export default Shop;
